<template>
  <div class="Recommend">
    <Card></Card>
    <ul>
        <li v-for="(item, index) in recommendList" :key="index">
            <h2>
                <img :src="item.imgUrl" alt="">
            </h2>
            <div>
                <h3>{{item.name}}</h3>
                <p>{{item.content}}</p>
                <div class="price">
                    <span>￥</span>
                    <b>{{item.price}}</b>
                </div>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
import Card from '@/components/home/Card.vue'

export default {
    props: {
        recommendList: Array
    },
    components: {
        Card
    },
    data() {
        return {
            
        }
    }
}
</script>

<style scoped>
    .Recommend ul li {
        position: relative;
    }
    .Recommend ul li h2 {
        text-align: center;
    }
    .Recommend ul li img {
        width: 9.6rem;
        height: 3.84rem;
        border-radius: .24rem;
    }
    .Recommend ul li > div{
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        padding: .3rem;
    }
    .Recommend ul li > div h3 {
        font-size: 12px;
    }
    .Recommend ul li > div p {
        font-size: 0.426666rem;
    }
    .price span b {
        font-size: .28rem;
    }
    .price {
        color: red;
        text-align: right;
        margin-top: .4rem;
    }
    .title {
        padding: .32rem 0;
        width: 100%;
        text-align: center;
        font-size: .32rem;
    }

</style>